<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text-center {
            width: 100%;
            text-align: center;
        }

        .red {
            color: red;
        }
    </style>
</head>
<body>
<div id="app" class="text-center">
    <h1>{{ msg }}</h1>
    <button @click="ck">点击</button>
    <p>多个复选框：</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <h1>{{ checkedNames }}</h1>
    <h1>{{ hello() }}</h1>
    <h1 v-html="myH1" :class="{red:use}"></h1>
    <h1>{{ 5 + 5 }}</h1>
    <h1>{{ ok ? 'YES' : 'NO' }}</h1>
    <h1>{{ msg.split('').reverse().join('') }}</h1>
    <h1 :id="'test-'+id">TEST</h1>
    <h1 v-if="ok">seen by U</h1>
    <h1>{{ "ABCDEFG" | toLowerCase }}</h1>
    <input v-model="inputText"/>
    <h1>{{ inputText }}</h1>
    <h1><a :href="url">baidu</a></h1>
    <h1 v-for="i in arr">{{ i }}</h1>
    <template v-for="i in arr">
        <h1>{{ i }}</h1>
        <hr/>
    </template>
    <h1>{{ reverseMsg }}</h1>
    <h1>site: {{site}}</h1>
    <h1><input v-model="meters"/>米</h1>
    <h1><input v-model="kilometers"/>千米</h1>
    <h1 :class="[class0]">Demo</h1>
    <h1 :class="{red:ok}">Demo</h1>
    <h1 :class="classObj">Demo</h1>
</div>

<script src="../frm/vue.js"></script>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            msg: "Hello World!",
            checkedNames: [],
            myH1: '<h1>Hello Demo0.</h1>',
            use: true,
            id: 1,
            ok: true,
            inputText: "hello",
            url: "http://www.baidu.com",
            arr: [1, 2, 3, 4, 5, 6, 7, 8],
            val: "TEST DEMO",
            kilometers : 0,
            meters:0,
            class0:"red",
            classObj:{
                red:true
            }
        },
        methods: {//这里的this 仍然是 vue实例
            ck() {
                alert("btn clicked");
            },
            hello() {
                return "hello demo0";
            }
        },
        computed: {
            reverseMsg() {//这里的this 仍然是 vue实例
                return this.msg.split().reverse().join();
            },
            site: {

                get(){//这里的this 仍然是 vue实例
                    return this.val;
                },
                set(v){
                    this.val = v;
                }
            }
        },
        filters: {
            toLowerCase(v) {
                return v.toLowerCase();
            }
        },
        watch:{
            kilometers(v){
                this.kilometers = v;
                this.meters = v*1000;
            },
            meters(v){
                this.meters = v;
                this.kilometers = v/1000;
            }
        }

    });
    app.$watch('msg', function (n, o) {
        console.log('msg', n, o);
    });
    app.$watch('inputText',function (n,o){
        console.log('inputText', n, o);
    });

    app.msg = "JKL";

    console.log(app.$data);


</script>

</body>
</html>
